<template>
    <view class="container m-b5">
        <!-- 顶部选项卡 -->
        <view class="swiper-tab dis-flex box-align-center flex-y-center">
            <view :class="'swiper-tab-item ' + (dataType === 'not_use' ? 'on' : '')" data-current="not_use" @tap="swichNav">未使用</view>
            <view :class="'swiper-tab-item ' + (dataType === 'is_use' ? 'on' : '')" data-current="is_use" @tap="swichNav">已使用</view>
            <view :class="'swiper-tab-item ' + (dataType === 'is_expire' ? 'on' : '')" data-current="is_expire" @tap="swichNav">已过期</view>
        </view>

        <scroll-view :scroll-y="true" :style="'height: ' + swiperHeight + 'px;'">
            <view class="coupon-list" v-if="list.length">
                <view class="coupon-item" v-for="(item, index) in list" :key="index">
                    <view :class="'item-wrapper color__' + (item.state.value ? item.color.text : 'gray')">
                        <view class="coupon-type">{{ item.coupon_type.text }}</view>
                        <view class="tip dis-flex flex-dir-column flex-x-center">
                            <view v-if="item.coupon_type.value == 10">
                                <text class="f-30">￥</text>
                                <text class="money">{{ item.reduce_price }}</text>
                            </view>
                            <text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
                            <text class="pay-line">满{{ item.min_price }}元可用</text>
                        </view>
                        <view class="split-line"></view>
                        <view class="content dis-flex flex-dir-column flex-x-between">
                            <view class="title">{{ item.name }}</view>
                            <view class="bottom dis-flex flex-y-center">
                                <view class="time flex-box">
                                    <text class="f-24">{{ item.start_time.text }}~{{ item.end_time.text }}</text>
                                </view>
                                <view class="state">
                                    <text class="f-24">{{ item.state.text }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="yoshop-notcont" v-else-if="notcont">
                <text class="iconfont icon-wushuju"></text>
                <text class="cont">亲，暂无优惠券哦</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 选项卡标示
            dataType: 'not_use',
            // 列表高度
            swiperHeight: 0,
            // 优惠券列表
            list: [],
            // show
            notcont: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 设置swiper的高度
        this.setSwiperHeight();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取优惠券列表
        this.getCouponList();
    },
    methods: {
        /**
         * 获取优惠券列表
         */
        getCouponList: function () {
            let that = this;
            app.globalData._get(
                'coupon/mylist',
                {
                    data_type: that.dataType
                },
                function (result) {
                    console.log(result);
                    that.setData({
                        list: result.data.list,
                        notcont: !result.data.list.length
                    });
                }
            );
        },

        /**
         * 设置swiper的高度
         */
        setSwiperHeight: function () {
            // 获取系统信息(拿到屏幕宽度)
            let systemInfo = uni.getSystemInfoSync();
            let rpx = systemInfo.windowWidth / 750;
            let // 计算rpx
                tapHeight = Math.floor(rpx * 80) + 1;
            let // tap高度
                swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
            this.setData({
                swiperHeight
            });
        },

        /**
         * 点击tab切换
         */
        swichNav: function (e) {
            let that = this;
            that.setData(
                {
                    list: {},
                    dataType: e.target.dataset.current
                },
                function () {
                    // 获取优惠券列表
                    that.getCouponList();
                }
            );
        }
    }
};
</script>
<style>
@import './coupon.css';
</style>
